<template>
  <div class="mask" @click="emit('close')">
    <div class="bigBox">
      <div class="mask-items">
        <p class="main-p">授权书</p>
        <div class="main" @click.stop>
          <div class="tips">
            <div class="tips-item">
              <div style="padding-right: 12px">导入说明：请先下载模版，填写信息</div>
              <div class="download">下载模板</div>
            </div>
          </div>
          <div class="uploadBox">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <img class="up" src="../../assets/imgs/up.png" alt="" />
              <!-- <Icon class="mr-5px" icon="el-icon-upload" /> -->
              <!-- <i class="el-icon-upload"></i> -->
              <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
              <div class="el-upload__tip" slot="tip">支持扩展名：.pdf .jpg .png</div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="mask-items">
        <p class="main-p">营业执照</p>
        <div class="main" @click.stop>
          <div class="uploadBox">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <img class="up" src="../../assets/imgs/up.png" alt="" />
              <!-- <Icon class="mr-5px" icon="el-icon-upload" /> -->
              <!-- <i class="el-icon-upload"></i> -->
              <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
              <div class="el-upload__tip" slot="tip">支持扩展名：.pdf .jpg .png</div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="mask-items">
        <p class="main-p">法人身份证</p>
        <div class="main" @click.stop>
          <div class="tips">
            <div class="tips-item">
              <div style="padding-right: 12px"
                >导入说明：请保持身份证信息清晰可见，否则无法通过</div
              >
              <!-- <div class="download">下载模板</div> -->
            </div>
          </div>
          <div class="uploadBox">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <img class="up" src="../../assets/imgs/up.png" alt="" />
              <!-- <Icon class="mr-5px" icon="el-icon-upload" /> -->
              <!-- <i class="el-icon-upload"></i> -->
              <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
              <div class="el-upload__tip" slot="tip">支持扩展名：.pdf .jpg .png</div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="mask-items">
        <p class="main-p">联系人身份证</p>
        <div class="main" @click.stop>
          <div class="tips">
            <div class="tips-item">
              <div style="padding-right: 12px"
                >导入说明：请保持身份证信息清晰可见，否则无法通过</div
              >
              <!-- <div class="download">下载模板</div> -->
            </div>
          </div>
          <div class="uploadBox">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <img class="up" src="../../assets/imgs/up.png" alt="" />
              <!-- <Icon class="mr-5px" icon="el-icon-upload" /> -->
              <!-- <i class="el-icon-upload"></i> -->
              <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
              <div class="el-upload__tip" slot="tip">支持扩展名：.pdf .jpg .png</div>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits([
    'close'
])
</script>

<style scoped>
/* 遮罩层*/
.mask {
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
  /* 使用固定定位让元素撑满全屏 */
  position: fixed;
  top: 0;
  justify-content: flex-end;
  /* flex-wrap: wrap; */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.main-p {
  font-size: 16px;
  font-weight: 500;
  margin: 20px 0px;
  color: #fff;
}
.main-p::before {
  content: '●';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  color: rgba(81, 123, 255, 1);
}
.main {
      background: #fff;
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    height: 80%;
}
.mask-items {
  width: 48%;
        height: 45vh;
}
::v-deep .el-upload-dragger{
        padding: 15px;
}
.bigBox{
    width: 86%;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.tips {
}
.up {
  width: 52px;
  margin: 0 auto;
  margin-bottom: 14px;
}
.tips-item {
  background: rgba(81, 123, 255, 0.2);
  border-radius: 12px;
  display: flex;
  padding: 7px;
  font-size: 16px;
  justify-content: center;
  align-items: center;
}
.download {
  border: 2px solid rgba(81, 123, 255, 1);
  border-radius: 4px;
  color: rgba(81, 123, 255, 1);
  padding: 3px;
}
.uploadBox {
  display: flex;
  justify-content: center;
}
.upload-demo {
  margin-top: 20px;
}
</style>